<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
export default {
  data() {
    return {
      chartData: {
        title: {
          text: "主要城市空气质量指数",
        },
        tooltip: {},
        legend: {
          data: ["PM2.5","一氧化碳","二氧化硫"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "PM2.5",
            type: "bar",
            data: [],
          },
          {
            name: "一氧化碳",
            type: "bar",
            data: [],
          },
          {
            name: "二氧化硫",
            type: "bar",
            data: [],
          },
        ],
      },
    };
  },
  //钩子函数
  mounted() {
    this.showChart();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption(this.chartData);
    },

    // 获取图表信息
    async showChart() {
      await this.$store.dispatch("rank/getshowAirLimit");
      
      this.airInfo.map((data) => {
        this.chartData.xAxis.data.push(data.cityName);
        this.chartData.series[0].data.push(data.pm25);
        this.chartData.series[1].data.push(data.co);
        this.chartData.series[2].data.push(data.so2);
        
      });
      this.draw();
    },
  },
  computed: {
    ...mapState("rank", { airInfo:"airInfoLimit"}),
  },
};
</script>

<style lang="less" scoped>
#main {
  height: 446px;
  border-radius: 4px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  background-color: #fff;
  padding: 24px;
  margin-bottom: 24px;
}
</style>
